<template>
  <div class="api-example">
    <h2>API请求示例</h2>
    
    <!-- 登录表单 -->
    <div class="login-section">
      <h3>用户登录</h3>
      <el-form :model="loginForm" @submit.prevent="handleLogin">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin" :loading="loading">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 事件列表 -->
    <div class="event-section" v-if="isLoggedIn">
      <h3>事件列表</h3>
      <el-button type="primary" @click="fetchEvents" :loading="loadingEvents">获取事件</el-button>
      
      <el-table :data="events" style="width: 100%" v-if="events.length > 0">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="createdAt" label="创建时间" />
      </el-table>
      
      <div v-else-if="events.length === 0 && !loadingEvents" class="empty-message">
        暂无事件数据
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
// 导入API方法
import { user, event } from '../api/request'

export default {
  name: 'ApiExample',
  setup() {
    // 状态管理
    const loading = ref(false)
    const loadingEvents = ref(false)
    const isLoggedIn = ref(false)
    const events = ref([])
    
    // 登录表单数据
    const loginForm = reactive({
      username: '',
      password: ''
    })

    // 处理登录
    const handleLogin = async () => {
      try {
        loading.value = true
        
        // 调用登录API
        const response = await user.login(loginForm)
        
        // 登录成功，保存token
        if (response.data?.token) {
          localStorage.setItem('token', response.data.token)
          isLoggedIn.value = true
          ElMessage.success('登录成功')
        }
      } catch (error) {
        // 错误已在请求拦截器中处理，这里可以添加额外逻辑
        console.error('登录失败:', error)
      } finally {
        loading.value = false
      }
    }

    // 获取事件列表
    const fetchEvents = async () => {
      try {
        loadingEvents.value = true
        
        // 调用获取事件列表API
        const response = await event.getEventList({
          page: 1,
          pageSize: 10
        })
        
        // 更新事件数据
        events.value = response.data || []
      } catch (error) {
        console.error('获取事件失败:', error)
      } finally {
        loadingEvents.value = false
      }
    }

    // 检查是否已登录
    const checkLoginStatus = () => {
      const token = localStorage.getItem('token')
      isLoggedIn.value = !!token
    }

    // 组件挂载时检查登录状态
    checkLoginStatus()

    return {
      loading,
      loadingEvents,
      isLoggedIn,
      events,
      loginForm,
      handleLogin,
      fetchEvents
    }
  }
}
</script>

<style scoped>
.api-example {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.login-section {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.event-section {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
}

.empty-message {
  text-align: center;
  padding: 40px;
  color: #909399;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}
</style>